<template>
  <div class="orderOne">
    <div class="address clearFix">


      <ul class="list">

        <li class=" ok-list" >

          <div >
            <p class="addressTitle">收货地址:</p>
            <p>{{address.shipping_firstname}}</p>
            <p>{{address.telephone}}</p>
            <p>{{address.shipping_province}}{{address.shipping_city}}{{address.shipping_district}}{{address.shipping_address_1}}</p>

          </div>

        </li>
      </ul>

    </div>
    <div class="salename">
      <img src="../../assets/footer1.png" alt="">
      <span>女神有财</span>
      <b>官方</b>
      <b>已绑定 平台直邮</b>
    </div>
    <div v-for="item in products" >
      <div class="goods clearFix"  @click="gotoAddress('/shop/details/'+item.prodcut_id)" >
       <!--  -->
        <div class="fl">
          <img class="icon" :src="item.image">
          <div class="text">
            <p>{{item.name}}{{item.model}}</p>
            <span>{{item.price}}</span>

          </div>

        </div>
        <div class="fr">
          x{{item.quantity}}
        </div>

      </div>
      <div class="money">
          <!--f88491-->
          成交价格:<span>{{item.total}}元</span>
      </div>
    </div>
    <div class="buyMsg" v-if="orderContent.comment!=''">
      <p>买家留言:{{orderContent.comment}}</p>

    </div>



    <div class="pay" >
      <div class="top clearFix" v-for="it in orderContent.totals">
        <div class="fl">
          {{it.title}}
        </div>
        <div class="fr payment">
          <p>{{it.text}}元</p>
        </div>
      </div>

    </div>


  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    name: 'OrderOne',
    data () {
      return {
        haveAddress:false,
        address:{},
        products:[],
        addressesId:'',
        content:'',
        totalPrice:0,
        orderContent:{}
      }
    },
    mounted:function(){
//      this.getAddress();
      var id = this.$route.query.id;
      this.initData(id);

    },

    methods:{
      gotoAddress(path){
        this.$router.push(path)
      },
      addAddress:function(){
        this.$router.push({path:'/me/add',query: {redirect: '/me/order'}});
      },
      payFn:function(){
        //confirmPay
        var ajaxData = {}
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_ids = this.$route.query.productId;
        ajaxData.address_id = this.addressesId;
        ajaxData.content = '';

        $.ajax({
          type:'post',
          url: RouteMap.confirmPay,
          data:ajaxData,
          success:function(res){
            if(res.code == 200){
              window.location.href = res.data.data.payment.url;
            }
            else{
              //Toast(res.msg)
            }
          }
        })

      },
      initData:function(id){

        $('body').scrollTop(0);
        var productId = id;
        var _this = this;
        var ajaxData = {};
        ajaxData.order_id = productId;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token || '';
        setTimeout(function(){
          $.ajax({
            type:'post',
            url: RouteMap.OneOrder,
            data:ajaxData,
            success:function(res){
              if(res.code == 200){

                _this.orderContent= res.data;
                _this.products=res.data.products;
                _this.address = res.data.address;
console.log(_this.orderContent)
              }
              else{
                //Toast(res.msg)
              }
            }
          })
        })
      }

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .address,.pay,.coupon,.payfor{width:100%;
    box-sizing:border-box;
    padding:.4rem 1rem;
    background:#fff;
    margin-top:.4rem;
  }
  .salename{
    padding:.1rem 1rem;
    border-top: .5rem solid #f2f2f2;
  }
  .salename span{
    font-size: .7rem;
    line-height: 1.6rem;
    margin:0 .5rem ;

  }
  .salename b{
    font-size: .4rem;
    background: #f38c83;
    border-radius: 3px;
    color: #fff;
    line-height: 1.6rem;
    margin-right: .3rem;
    padding:.05rem;
  }
  .salename img{
    width:1.6rem;
    border-radius: 50%;
  }

  .buyMsg {
    box-sizing:border-box;
    margin:0 .8rem ;
    padding:.2rem .7rem;
    line-height: 1rem;

  }
  .goods{
    box-sizing:border-box;
    background:#f2f2f2;
    margin:0 .8rem ;
    padding:.7rem;
    line-height: 1rem;
    margin-bottom: .2rem;
  }
  .goods .fl{
    width: 11rem;

  }
  .goods .fl img{
    width: 3rem;
    float: left;
    border: 1px solid #ddd;
    padding: 0.1rem;
  }
  .goods .fl .text{
    width: 7rem;
    padding-left: .5rem;
    float: left;

  }
  .goods .fl .text span{
    font-size: .6rem;

  }
  .goods .fl .text p{
    font-size: .5rem;
    line-height: .85rem;
    padding-bottom: .3rem;
  }



  .address .name{ padding-left:.4rem;}
  .address .more{ padding-top:.4rem;}

  .pay .top {
    font-size: .7rem;
    line-height: 1.4rem;
    border-bottom: 1px solid #eee;
  }


  /*.coupon .left{width:80%;}*/
  /*.payfor .title{*/
    /*font-size:.8rem;*/
    /*padding-bottom:.2rem;*/
  /*}*/

  /*.payfor .system li{*/
    /*border-bottom:1px solid #222;*/
    /*padding:.3rem 0;*/
  /*}*/
  /*.payfor .system li:last-child{*/
    /*border-bottom:none;*/
  /*}*/
  /*.payfor .system li .name{*/
    /*padding-left:.2rem;*/
  /*}*/
  /*.payfor .tip{*/
    /*font-size:.6rem;*/
    /*color:#bbb;*/
    /*padding-top:.2rem;*/
    /*line-height:.8rem;*/
  /*}*/



  /*.all{*/
    /*display:flex;*/
    /*justify-content:space-around;*/
    /*align-items:center;*/
    /*position:fixed;*/
    /*bottom:0;left:0;*/
    /*width:100%;*/
    /*padding: 0.5rem 0;*/
    /*border-top: 1px solid #ccc;*/
  /*}*/
  /*.all .left{*/
    /*flex:1;*/
    /*height:100%;*/
    /*background:#fff;*/
    /*padding:.4rem 0 0 .6rem;*/
    /*box-sizing:border-box;*/
  /*}*/
  /*.all .left  p{padding-top:.1rem;}*/
  /*.all .right{*/
    /*padding-right: .5rem;*/
    /*text-align: right;*/
  /*}*/
  /*.all .right input{*/
    /*width:100%;*/
    /*height:2rem;*/
    /*background:#aaa;*/
  /*}*/

  .list {
    background:#fff;
    width:100%;
    box-sizing:border-box;
    margin-top:.3rem;
    padding:0;
    font-size:.7rem;
  }
  .list li{
  }
  .list li:last-child{
    border-bottom:none;
  }
  .list li.ok-list{
    padding:.65rem;
    background: url("../../assets/me/a3.png");
    background-size: 100% 100%;
    font-size: 0.6rem;
    margin-top: 0.5rem;
    line-height: .8rem;
  }
  .list li.ok-list .fl{
    width: 10rem;
    word-wrap: break-word;
    word-break: break-all;
  }
  .list li.ok-list p{
    padding-bottom:.2rem;

  }
  .list li.ok-list .icon{
    margin:.4rem .3rem 0 0;
    border-radius:50%;
  }

  .list li b{
    float:left;
    color:#000;
    line-height:2rem;

  }
  .list li .edit{
    line-height:1rem;
    font-size:.9rem;
    color:#aaa;
    float:right;
    margin-top: 1.9rem;
  }
  .list li .edit img{
    width: .7rem;
  }
  .add-ico{
    width: 0.5rem;
    margin-right: 0.2rem;
  }
  .next-btn{
    margin-top: 0.5rem;
    padding: 0;
  }
  .next-btn .add-ico,.next-btn .text{
    vertical-align: middle;
    color: #1c1c1c;
  }
  .next-btn .mint-button--danger{
    background: #f5f5f5;
  }

  .addressTitle{
    font-size:.8rem;
    line-height: 1rem;
  }
.payment{
}
  .pay{
    border-top: .5rem #f2f2f2 solid;
    font-size: .6rem;
  }
.money{
  color:#ff8c99;
  font-size: .5rem;
  padding:.6rem 0.8rem;
  text-align: right;
}
  .money span{
    font-size: .9rem;
  }
</style>
